<script setup lang="ts">
import { ref } from 'vue';
import { useUserInfo } from '../../composables';
import { EVENTS, GameKernel } from '../../game';

const { state: userInfoState } = useUserInfo();

const name = ref('');

function onSubmitClick() {
  if (!name.value) return;
  GameKernel.inst.bus.emit(EVENTS.USER_INFO_CHANGE_USERNAME, name.value);
}
</script>

<template>
  <div
    v-if="userInfoState.username === ''"
    class="flex flex-col gap-2 items-center justify-center absolute w-screen h-screen z-10 bg-container-background text-primary-text"
  >
    <div class="text-xl">你叫什么名字？</div>
    <div>
      <a-input v-model:value="name"></a-input>
    </div>
    <div>
      <a-button :disabled="name === ''" @click="onSubmitClick">确定</a-button>
    </div>
  </div>
</template>
